<!-- 我的树形下拉框 -->
<template>
<div class="my-select-tree-wp">


  <my-select-tree-a v-model="val1" :filterable="true" :options="options"></my-select-tree-a> <button @click="show1()">显示</button>

  <my-select-tree-a v-model="val2" :multiple="true" :collapseTags="true" :options="options"></my-select-tree-a> <button @click="show2()">显示</button>

  <br><br>

  <el-select v-model="valA" placeholder="请选择">
    <el-option
      v-for="item in optionsA"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

  <br/><br/>

  <el-cascader class="collect-org-select"
    v-model="treeData"
    :options="aTree"
    :props="{ multiple: true, checkStrictly: true, value: 'value1' }"
    collapse-tags
    clearable
    @change="cascaderChange">
    <div slot-scope="scope">
      {{cs(scope)}}
    </div>  
  </el-cascader>

</div>
</template>
<script>


import MySelectTreeA from "./my-select-tree.vue";
import TreeSelect from "./tree-select.vue";

export default {
  name: 'my-select-tree',
  components: {
    MySelectTreeA,
    TreeSelect,
  },
  data () {
    return {
      
      val1: '1_2_1',

      val2: ['1_2', '1_2_1', '1_2_4'],

      options: [
        {label: '测试1', value: '1', children: [
          {label: '测试1_1', value: '1_1'},
          {label: '测试1_2', value: '1_2', children: [
            {label: '测试1_2_1', value: '1_2_1'},
            {label: '测试1_2_2', value: '1_2_2'},
            {label: '测试1_2_3', value: '1_2_3'},
            {label: '测试1_2_4', value: '1_2_4'},
          ]},
          {label: '测试1_3', value: '1_3'},
        ]},
        {label: '测试2', value: '2'},
        {label: '测试3', value: '3'},
        {label: '测试4', value: '4'},
        {label: '测试5', value: '5'},
        {label: '测试6', value: '6'},
        {label: '测试7', value: '7'},
        {label: '测试8', value: '8'},
      ],

      valA: '选项10',
      optionsA: [
        {
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }, {
          value: '选项6',
          label: '北京烤鸭'
        }, {
          value: '选项7',
          label: '北京烤鸭'
        }, {
          value: '选项8',
          label: '北京烤鸭'
        }, {
          value: '选项9',
          label: '北京烤鸭'
        }, {
          value: '选项10',
          label: '北京烤鸭'
        }, {
          value: '选项11',
          label: '北京烤鸭'
        }, {
          value: '选项12',
          label: '北京烤鸭'
        }, {
          value: '选项13',
          label: '北京烤鸭'
        }, {
          value: '选项14',
          label: '北京烤鸭'
        }
      ],


      prev: {
        type: '', // 1添加，2删除
        data: [], // 前一个数据
        
      },
      treeData: [],
      aTree: [{"label":"绵竹市血防管理所","value1":"A01","children":[{"label":"剑南街道委员会","value1":"A01A03","children":[{"label":"迎祥街社区","value1":"A01A03A01"}]},{"label":"华丽街道血防所","value1":"A01A02","children":[{"label":"绚丽社区委员会","value1":"A01A02A01"},{"label":"tset测试","value1":"A01A02A02"}]},{"label":"紫岩街道血防所","value1":"A01A01","children":[{"label":"蔚泉社区委员会","value1":"A01A01A01"}]}]},{"label":"测试部门","value1":"A02","children":[{"label":"11111","value1":"A02A01"}]}]


    }
  },
  mounted () {
    this.aTree = this.addAllItme(this.aTree);
    console.log(this.aTree);
  },
  methods: {
    show1 () {
      console.log(this.val1);
    },
    show2 () {
      console.log(this.val2);
    },

    cs (scope) {
      console.log(scope);
      return 123;
    },

    // 添加全选按钮
    addAllItme (tree) {
      ergodic(tree);
      return tree;
      function ergodic (arr, pVal) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i];
          if (item.children && item.children.length) {
            ergodic(item.children, item.value);
          }
        }
        arr.unshift({
          label: '全选',
          value: (pVal || '') + '_all',
          keys: arr.map(item => item.value)
        })
      }
    },

    cascaderChange (item, b) {
      console.log(this.treeData.length);
      console.log(item.length);
      // console.log(b);
    }

  }
}
</script>
<style lang="scss" scoped>
.my-select-tree-wp {
  
}
</style>